<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>
        .container{
            width: 500px;
            height: 400px;
            margin: 50px auto;
            border:solid 1px #333;
            position:relative;
        }

        .move{
            width: 100px;
            height: 100px;
            position:absolute;
            left: 0;
            top:0;
            background: #cae;
        }
    </style>
</head>
<body>
    <div id="root"> </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //声明 类式组件
        class App extends React.Component{
            
            render(){
                return <div 
                    ref={el => this.container = el} 
                    className="container" 
                    onClick={this.click}  
                    onMouseMove={this.mousemove}
                    onContextMenu={this.rightclick}
                    >
                        <div ref={el => this.move = el} className="move"></div>
                    </div>
            }

            click = (e) => {
                //获取事件源
                // console.log(e.target);
                e.target.style.background = 'rgb(56,23,89)'
            }

            rightclick = (e) => {
                // console.log('你右键点击了我')
                //阻止默认行为
                e.preventDefault();
            }

            //鼠标移动事件的回调函数
            mousemove = (e) => {
                //获取鼠标距离可视区域左侧的偏移量
                let x = e.clientX;
                let y = e.clientY;
                //获取外层容器距离左侧的偏移量
                let left = this.container.offsetLeft;
                let t = this.container.offsetTop;
                //获取 move 元素
                let width = this.move.offsetWidth;
                let height = this.move.offsetHeight;
                //计算最终的 left 的值
                let newLeft = x - left - width / 2;
                // console.log(x, left, width)
                let newTop = y - t - height / 2;
                //边界检测
                // if(newLeft <= 0) newLeft = 0;
                //计算最大的 left 值
                let maxLeft = e.target.offsetWidth - this.move.offsetWidth;
                // if(newLeft >= maxLeft) newLeft = maxLeft;
                //设置 move 元素的 left 的值
                this.move.style.left = newLeft + 'px';
                this.move.style.top = newTop + 'px';
            }

            // mousemove = (e) => {
            //     //拼接字符串
            //     let str = `X: ${e.clientX} <br/> Y: ${e.clientY}`;
            //     //设置标签的文本
            //     e.target.innerHTML = str;
            // }
        }

        ReactDOM.render(<App/>, document.querySelector("#root"));
    </script>
</body>
</html>